<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
<link rel="stylesheet" href="style.css">

</head>
<body>


    <style>
        div{
            width: 100%;
            height: 150px;
            background-color: red;
            /* 弹性排列 */
            display: flex;
            /* 水平排列 */
            justify-content: space-around;
            /* 垂直排列 */
            align-items: center;
        }

        div>span{
            width: 200px;
            background-color: yellow;
            height: 100px;
        }
    </style>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
<!-- <style>
    .one{
    width: 200px;
    height: 100px;
    background-color: orange;
    color: aliceblue;

    text-align: left;
    line-height: 100px;

    border-radius: 10px;

    border: 5px black solid;
    /* 不会撑大盒子 */
    box-sizing: border-box;

    /* 内边距 */
    padding-left: 10px;
 /* 外边距 */
    margin-bottom: 10px;
    }
</style>
<div class="one">
    这是一个DIV！！！
</div> -->



<!-- <style>
    
    .one{
        font-size: 40px;
        font-family: '黑体';
        /* 倾斜 */
        font-style: italic;
        /* color: #4eb820; */
        color: rgb(255,0,0);
        /* 文本对齐 */
        text-align: center;
        /* 下划线 */
        text-decoration: underline;
        line-height: 60px;
        /* background-color: blue; */

        background-image: url(美女.jpg);
        background-size: contain;
        /* background-repeat: no-repeat;
        background-position: top center; */
        height: 200px;
    }

   .two{
    font-size: 40px;
    font-family: '宋体';
    line-height: 60px;
   }


   .three{
    font-size: 40px;
    font-family: '华文行楷';
    /* 加粗 */
    font-weight: bold;
     /* 首行 缩进 */
    text-indent: 2em;
   }
</style>
<div class="one">
    这是一个DIV！！！
</div>
<div class="two">
    这是一个DIV！！！
</div>
<div class="three">
    这是一个DIV！！！
</div> -->






<!-- <style>
     .one:hover{
        color: red;
        font-size: 50px;
    }
    .one:active{
        color: blue;
        font-size: 100px;
    }
</style>
<div class="one">
    这是一个DIV！！！
</div>  -->




    <!-- <style>
        .one,.two{
            color: blue;
            font-size: 40px;
        }
    </style>
<div >
    <a href="#" class="one">空链接</a>
    <p>
        <a href="#" class="two">空链接2</a>
    </p>
</div> --> 



<hr>



    <!-- <style>
        ul>li{
            color: blue;
            font-size: 30px;
        }

        ol li{
            color: red;
            font-size: 40px;
        }
    </style>
<ol>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ol>
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul> -->


<hr>

<!-- <style>
    #oneDiv{
        color: blue;
        font-size: 30px;
    }
    #twoDiv{
        color: red;
        font-size: 40px;
    }
</style>

    <div id="oneDiv">
        这是一个DIV！！！
    </div>
    <div  id="twoDiv">
        这也是一个DIV！！！
    </div>  -->



<hr>

    <!-- <style>
        .one
        {
            color: red;
            font-size: 30px;
        }
        .two{
            color: black;
            font-size: 30px;
        }
        .three
        {
            color: blue;
            
        }
        .four
        {
            font-size: 40px;
        }
    </style>
    <div class="one">
        这是一个段落！！！
    </div>
    <div class="one">
        这ye是一个段落！！！
    </div>
    <div class="two"> 
        这是二个段落！！！
    </div>
    <div class="three  four">
        这是三个段落！！！
    </div> -->


<hr>


    <p>
        这是一个段落！！！
    </p>
    <!-- <p>
        这是二个段落！！！
    </p>

    <p>
        这是三个段落！！！
    </p> -->
    <!-- style标签可以放到任何人一个位置上 -->
    <hr>
    <style>
        p{
            color: red;
            font-size: 30px;
        }
        div{
            color: blue;
            font-size: 50px;
        }
    </style> 

    <p style="color: blue; font-size: 40px;" >
         <!-- 只针对当前标签/元素 -->
        今天学的是CSS
    </p>
</body>
</html>